<template>
    <div
      v-show="props.isVisible"
      :style="{
        position: 'absolute',
        top: `${props.position.y}px`,
        left: `${props.position.x}px`,
        background: 'white',
        border: '1px solid #f0f0f0',
        color: '#2565ad',
        padding: '5px',
        zIndex: 1000,
        boxShadow: 'rgba(0, 0, 0, 0.1) 0px 2px 12px',
        borderRadius: '4px'
      }"
       @mouseleave.stop="hideContextMenu()"
    >
      <ul>
        <li v-for="item in props.menuItems" :key="item.text" @click.stop="hideMenu(props.site_id)">
          {{ item.text }}
        </li>
      </ul>
    </div>
    <a-modal v-model:open="open" title="编辑" :width="400" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
        <a-form
            :model="formState"
            name="basic"
            ref="formRef"
            :label-col="{ span: 7 }"
            :wrapper-col="{ span: 17 }"
            autocomplete="off"
        >
            <a-form-item
            label="站点名称"
            name="name"
            :rules="[{ required: true, message: '请输入站点名称',trigger: 'blur' }]"
            >
               <a-input v-model:value="formState.name" placeholder="请输入站点名称" />
            </a-form-item>
        </a-form>
    </a-modal>
  </template>
  
<script setup lang="ts">
  import { user_site_edit } from '../api/article'
  import { message } from 'ant-design-vue';
  import { ref } from 'vue';
  const open = ref<boolean>(false);
  const confirmLoading = ref<boolean>(false);
  const formRef = ref()
  const props:any = defineProps({
    menuItems: {
      type: Array,
      required: true,
    },
    isVisible: {
      type: Boolean,
      required: true,
    },
    position: {
      type: Object,
      required: true,
    },
    site_id: {
        type: Number,
        required: true,
    },
    name: {
        type: String,
        required: true,
    }
  })
  const formState = ref({
    name: props.name // 站点名称
  })
  const emits = defineEmits(['hide-menu','hide-model'])
//   const isVisible = ref(false);
//   const position = ref({ x: 0, y: 0 });
  const hideMenu = (val) => {
    console.log('点击了',val)
    open.value = true;
    emits('hide-menu',{site_id: props.site_id});
  };
  const hideContextMenu = () => {
    emits('hide-menu', {site_id: props.site_id});
  }
  const handleOk = () => {
    formRef.value
    .validate()
    .then(() => {
        console.log('values', formState.value);
        confirmLoading.value = true;
        let obj = {
            site_id: props.site_id,
            name: formState.value.name
        }
        console.log(obj)
        user_site_edit(obj).then((response:any) => {
            console.log(response)
            message.success(response.message);
            emits('hide-model');
            open.value = false;
            confirmLoading.value = false;
        }).catch(err => {
            console.log('err',err)
        })
    })
    .catch(error => {
      console.log('error', error);
    });
  };
  const handleCancel = () => {
    console.log('取消了')
    if(formRef.value) {
        formRef.value.resetFields();
    }
  }
  </script>
  
  <style scoped>
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  
  li {
    cursor: pointer;
    padding: 5px;
  }
  
  li:hover {
    background-color: #f0f0f0;
  }
  </style>